@<template>
  <div class="newMusic-box">
    <!-- 头部选择 -->
    <div class="top">
      <el-button round :class="selectIndex?'selectStyle':''" @click="selectType">新歌速递</el-button>
      <el-button round :class="!selectIndex?'selectStyle':''" @click="selectTypeOne">新歌上架</el-button>
    </div>
    <!-- 地区分类 -->
    <div class="areaClass">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="华语" name="7"></el-tab-pane>
        <el-tab-pane label="欧美" name="96"></el-tab-pane>
        <el-tab-pane label="韩国" name="16"></el-tab-pane>
        <el-tab-pane label="日本" name="8"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- list显示  表格-->
    <div class="Musiclist">
      <div>热门歌曲</div>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%;color:#b46cbd"
        :show-header="false"
        v-loading = 'pictLoading'  
        element-loading-background = 'rgba(0,0,0,.5)'
        element-loading-text = '数据正在加载中'
        element-loading-spinner = 'el-icon-loading'
      > 
        <!-- 加载效果  
        v-loading = 'pictLoading'
        element-loading-background = 'rgba(0,0,0,.5)'
        element-loading-text = '数据正在加载中'
        element-loading-spinner = 'el-icon-loading'  -->
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column width="120" v-if="selectIndex">
          <!-- 新歌速递 -->
           <template slot-scope="scope">
                  <div class="imgstyle">
                    <!-- scope.row ：当前对象 -->
                   <img :src="scope.row.album.picUrl" alt="">
                  </div>
             </template>
        </el-table-column>

         <el-table-column width="120" v-else>
          <!-- 新歌速递 -->
           <template slot-scope="scope">
                  <div class="imgstyle">
                    <!-- scope.row ：当前对象 -->
                   <img :src="scope.row.blurPicUrl" alt="">
                  </div>
             </template>
        </el-table-column>
        <el-table-column property="name" label="歌名" width="120">
        </el-table-column>
        <el-table-column property="artists" label="作者" width="300" v-if="selectIndex"> 
          <!-- {name:'张三',obj:{age:12}} -->
             <template slot-scope="scope">
                  <div>
                    <!-- scope.row ：当前对象 -->
                    {{scope.row.artists[0].name}}
                  </div>
             </template>
        </el-table-column>

         <el-table-column property="artists" label="作者" width="300" v-else> 
          <!-- {name:'张三',obj:{age:12}} -->
             <template slot-scope="scope">
                  <div>
                    <!-- scope.row ：当前对象 -->
                    {{scope.row.artists[0].name}}
                  </div>
             </template>
        </el-table-column>
        <!-- 播放时间 新歌速递-->
        <el-table-column property="artists" label="播放时间" width="300" v-if="selectIndex"> 
             <template slot-scope="scope">
                  <div>
                    <!-- scope.row ：当前对象 -->
                    {{scope.row.bMusic.playTime | formate}}
                  </div>
             </template>
        </el-table-column>
        <!-- 新歌上架  发布时间 -->
        <el-table-column property="artists" label="发布时间" width="300" v-else> 
             <template slot-scope="scope">
                  <div>
                    <!-- scope.row ：当前对象 -->
                    {{scope.row.publishTime |  timeFormat}}
                  </div>
             </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 加载效果 -->
    <!-- <Load></Load> -->
  </div>
</template>

<script>
// import Load from '@/components/Load.vue'; //加载的组件
import{getnewMusicList,getnewMusicGo} from '@/network/newSong'
import {timeFormat,formatDateTime} from '@/common/common'

export default {
  data() {
    return {
      pictLoading:false,
      selectIndex:true,
      activeName: "0",
      tableData: [], 
    };
  },
  //  components:{
  //     Load
  // },
  created(){
    this.getnewMusicListM(0)
  },
  filters:{
    formate:function(val){
     //处理逻辑  例如：187076 变成 03:20
     const  time = timeFormat(val)
      return time
    },
    timeFormat:function(val){
      const times = formatDateTime(val)
      return times
    }
  },
  methods: {
    selectType(){
      this.selectIndex = true;
      this.activeName = '0'
      this.getnewMusicListM(0)
    },
    //点击新歌上架
    selectTypeOne(){
      this.selectIndex = false;
      this.getnewMusicGoM('ALL')
      this.activeName = '0'
    },
    //选择地区
    handleClick(tab) {
      // console.log(tab.name);
      if(this.selectIndex){
      //新歌速递
       //0：全部 // 7：华语// 96：欧美// 16:韩国// 8：日本
       const type = tab.name*1 
       this.getnewMusicListM(type)
      }else{//新歌上架
      switch(tab.name){
        case '0' : 
        this.getnewMusicGoM('ALL')
        break
        case '7' : 
        this.getnewMusicGoM('ZH')
        break
        case '96' : 
        this.getnewMusicGoM('EA')
        break
        case '16' : 
        this.getnewMusicGoM('KR')
        break
        case '8' : 
        this.getnewMusicGoM('JP')
        break
      }
        
      }
    },
    //点击表格没有行出发
    handleCurrentChange(val) {
        this.currentRow = val;
      },
      //获取新歌速递的方法
      getnewMusicListM(type){
        this.tableData = [],
        this.pictLoading = true,//一发送网络请求 加载效果显示
        getnewMusicList('top/song',{type:type}).then(res=>{
          // console.log(res)
          this.pictLoading = false,//网络请求成功  加载效果消失
          this.tableData = res.data.splice(0,10)
        })
      },
      getnewMusicGoM(area){
        this.tableData = [],
        this.pictLoading = true,//一发送网络请求 加载效果显示
        getnewMusicGo('/top/album',{area:area,limit:10}).then(res=>{
          // console.log(res);
          this.pictLoading = false,//网络请求成功  加载效果消失
          this.tableData = res.monthData.splice(0,10)
        })
      }
    }
};
</script>

<style scoped lang='less'>
.newMusic-box {
  .selectStyle{
    background:skyblue;
    color:#fff ;
  }
  .top {
    width: 300px;
    margin-top: 20px;
    margin: 0 auto;
  }
  .imgstyle{
    height: 60px;
    width: 60px;
    img{
      width: 100%;
      height: 100%  ;
    }
  }
}
</style>